<template>
  <PageWrapper contentFullHeight>
    <CollapseContainer title="表单基础示例">
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { CollapseContainer } from '@/components/Container';
  import { PageWrapper } from '@/components/Page';

  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  // prettierrc-ignore
  // 字段信息
  const schemas: FormSchema[] = [
    {
      field: 'sex1',
      component: 'RadioGroup',
      label: '性别(int)',
      colProps: {
        span: 8,
      },
      defaultValue: 2, // options 的 value 是数字类型，必须为数字类型；是字符串类型，必须为字符串类型
      componentProps: {
        options: [
          {
            label: '男',
            value: 1,
          },
          {
            label: '女',
            value: 2,
          },
        ],
      },
    },
    {
      field: 'sex2',
      component: 'RadioGroup',
      label: '性别(str)',
      colProps: {
        span: 8,
      },
      defaultValue: '1',
      componentProps: {
        options: [
          {
            label: '男',
            value: '1',
          },
          {
            label: '女',
            value: '2',
          },
        ],
      },
    },
    {
      field: 'sex3',
      component: 'RadioGroup',
      label: '性别(按钮)',
      colProps: {
        span: 8,
      },
      defaultValue: '1',
      componentProps: {
        optionType: 'button',
        options: [
          {
            label: '男',
            value: '1',
          },
          {
            label: '女',
            value: '2',
          },
        ],
      },
    },
    {
      field: 'sex4',
      component: 'RadioGroup',
      label: '性别(实体&小)',
      colProps: {
        span: 8,
      },
      defaultValue: '1',
      componentProps: {
        optionType: 'button',
        buttonStyle: 'solid',
        options: [
          {
            label: '男',
            value: '1',
          },
          {
            label: '女',
            value: '2',
          },
        ],
      },
    },
    {
      field: 'sex5',
      component: 'RadioGroup',
      label: '性别(实体&小)',
      colProps: {
        span: 8,
      },
      defaultValue: '1',
      componentProps: {
        optionType: 'button',
        buttonStyle: 'solid',
        size: 'small',
        options: [
          {
            label: '男',
            value: '1',
          },
          {
            label: '女',
            value: '2',
          },
        ],
      },
    },

    {
      field: 'field3',
      component: 'RadioButtonGroup',
      label: 'RadioButtonGroup',
      colProps: {
        span: 8,
      },
      defaultValue: '1',
      componentProps: {
        options: [
          {
            label: '选项1',
            value: '1',
          },
          {
            label: '选项2',
            value: '2',
          },
        ],
      },
    },
  ];

  const [register] = useForm({
    labelWidth: 120,
    schemas,
    actionColOptions: { span: 24 },
    fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
  });

  const keyword = ref<string>('');

  // 重置方法
  function handleReset() {
    keyword.value = '';
  }

  // 提交方法
  function handleSubmit(values: any) {
    console.log('values', values);
    createMessage.success('click search,values:' + JSON.stringify(values));
  }
</script>
